import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  ScrollView,
} from 'react-native';

import BasePage from '../common/BasePage';
import CommonStyles from '../../common/CommonStyles';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import NoticeAdView from '../common/NoticeADView';
import Constants from '../../common/Constants';
import TImage from '../../components/TImage';
import LoginCheckIsUserAction from '../../actions/login/LoginCheckIsUserAction';
import CommonViewPagerMultiShow from '../common/CommonViewPagerMultiShow';
import HeartEapItemView from './HeartEapItemView';
import HeartEapRequestAction from '../../actions/heart/HeartEapRequestAction';

//{icon:require("../../../resource/images/heart/world.png"),key:"heart_enter_world", name:"走进心世界", page:Config.pages.heart_enter_world, souorce:{uri:""}},
var BUTTONS = [
  {icon:require("../../../resource/images/heart/world.png"),key:"heart_enter_world", name:"心理评测", page:Config.pages.heart_test_main, souorce:{uri:""}},
  {icon:require("../../../resource/images/heart/eap.png"),key:"heart_eap_main", name:"EAP活动", page:Config.pages.heart_eap_main, souorce:{uri:""}},
   {icon:require("../../../resource/images/heart/zhp.png"),key:"zhp_main", name:"在线咨询", page:Config.pages.heart_online, souorce:{uri:""}}
];

export default class HeartMainPage extends BasePage {
  constructor(props) {
    super(props);
    this.state.listData = [];
  }
  componentWillUpdate(nextProps, nextState) {
    if(nextState.isResponeUpdate == true) {
      nextState.isResponeUpdate = false;
      if(nextState.data && (nextState.data instanceof Array)) {
        nextState.listData = nextState.data;
      }
      else {
        nextState.listData = [];
      }
    }
    if(this.props.updateMark != nextProps.updateMark) {
      this._requestData();
    }
  }
  componentDidMount() {
    this._requestData();
  }
  _renderNavigationBarRightButtonContent() {
    return (
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <TouchableOpacity
          style={{ marginRight: 10 }}
          onPress={() => {
            this.gotoPage(Config.pages.plate_search,{type:'activities'});
          }}
        >
          <TImage
            source={require("../../../resource/images/workhard/search2.png")}
            style={{ width: 40, height: 40 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
  _requestData() {
      new HeartEapRequestAction().call(this, {page:1, tag:0,page_size:10, home_page:1})
      this._viewPager.doRefresh();
  }
  _renderSmallPager() {
      return (
        <CommonViewPagerMultiShow ref={(ref) => this._viewPager = ref} type={Constants.SLIDER_TYPE.HEART_EAP}/>
      )
  }
  _renderNavigationBarTitle() {
      return(
        <View style={{height:SizeUtils.translateDesignNumToCode(30),marginTop:0}}>
          <Text style={{textAlign:'center',
            fontSize:SizeUtils.translateFontSizeToCode(36),
            color:this._fontColor, fontFamily:'STHeitiSC-Medium',
          }}> {this._getTitle()} </Text>
        </View>
      )
  }

  render(){
  	return (
      <View style={{flex: 1}}>
        <ScrollView style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height,
          marginTop:Config.paddingTop,
          backgroundColor:"#f2f2f2"}}>
          {this._renderSmallPager()}
          <NoticeAdView txt="文字广告轮播" tag={7}/>
          <View style={{marginTop:SizeUtils.translateDesignHeightToCode(20),
              marginBottom:SizeUtils.translateDesignHeightToCode(20),
              backgroundColor:'#fff'}}>
            {this._renderPageButtons()}
          </View>
          {this._renderHeader()}
          {
          this.state.listData.map(
            (data, index) => {
              return this._renderItemR(data, index);
            }
          )
        }
        </ScrollView>
        {this._renderNavigationBar()}
      </View>
    )
  }
  _renderItemR(data, index) {
    return (<View key={index} style={{backgroundColor:'#fff'}}><HeartEapItemView data={data}  /></View>);
  }
  _renderHeader() {
    return (
      <View style={{flexDirection:"row", paddingLeft:SizeUtils.translateDesignWidthToCode(30),
          paddingRight:SizeUtils.translateDesignWidthToCode(20),
          backgroundColor:'#fff',
          width:SizeUtils.getWindowSize().width,
          paddingBottom:SizeUtils.translateDesignHeightToCode(30), justifyContent:"space-between",
          paddingTop:SizeUtils.translateDesignHeightToCode(32 - 8), alignItems:"center",
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",}}>
        <View style={{flexDirection:"row", alignItems:"center",}}>
          <TImage source={require("../../../resource/images/home/biaotitle.png")} style={{width:8, height:30}}/>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
            marginLeft:SizeUtils.translateDesignWidthToCode(8), borderWidth:0,
            backgroundColor:"#00000000",
            fontWeight:"bold"}} >
            {'EAP活动'}
          </Text>
        </View>
        <TouchableOpacity onPress={this._onPressMore.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#999999",}}>
            {'进入 >'}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
  _onPressMore() {
    this.gotoPage(Config.pages.heart_eap_main);
  }
  _renderPageButtons() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          flexDirection:"row", justifyContent:"space-around",}}>
        {
          BUTTONS.map(
            (data, index) => {
              return this._renderItem(data, index);
            }
          )
        }
      </View>
    )
  }

  _renderItem(data, index) {
    return(
      <TouchableOpacity key={index} style={{alignItems:"center",
          justifyContent:"center",
          padding:SizeUtils.translateDesignHeightToCode(30)
          }}
        onPress={() => this._onPressItem(data)}>
        <TImage source={data.icon}
              style={{width:84, height:84}}/>
        <Text style={[CommonStyles.secondaryText,{marginTop:SizeUtils.translateDesignHeightToCode(-2),
          fontSize:SizeUtils.translateFontSizeToCode(25)}]}>
          {data.name}
        </Text>

      </TouchableOpacity>
    )
  }

  _onPressItem(data) {
    if( data.key === "heart_enter_world"){
      this.gotoPage(Config.pages.heart_test_web);
    }else{
      new LoginCheckIsUserAction().call(this, {content:"你是游客身份，不能使用此功能"},
        (result)=>this._onCheckIsUserCallback(result, data))
    }
  }

  _onCheckIsUserCallback(result, data) {
    if(result) {
      this.gotoPage(data.page);
    }
  }
}
